<template>
  <Loging v-show="loging" />
  <div class="about">
    <div class="maxType" v-for="(item, index) in list" :class="{ 'rightType': index == 2 }">
      <!-- 竖线控制 -->
      <div class="triangle triangleShadow" v-show="index != 0" :style="{
        transform: `translate(-31px,${index == 1 ? betweenTop : maxTop}px)`,
        height: index == 1 ? betweenLength + 'px' : maxLength + 'px'
      }"
        :class="{'triangleDisplay':index == 1 ?(betweenLength==0?true:false) : (maxLength==0?true:false)}"
      ></div>
      <div class="minType" v-for="ele in item" @click="handleType(ele, index)">
        <!-- 横线：左线控制 -->
        <div
          class="triangleShadow"
         :class="{
            'leftStart': lineLeft(index, ele.type),
            'leftEnd': !lineLeft(index, ele.type)
        }"></div>
        <!-- 横线：右线控制 -->
        <div
          class="triangleShadow"
          :class="{
            'rightStart': lineRight(index, ele.type),
            'rightEnd': !lineRight(index, ele.type)
        }"></div>
        <div class="ptsChunk">
          <img class="pts ptsBorder" :class="{ 'ptsStyle': typeEle == ele }" :src="ele.url" />
          <div class="triangleBot" v-show="typeEle == ele">
          </div>
          <div class="triangleTop" v-show="typeEle == ele">
          </div>
        </div>
        <p class="ptsSize">{{ ele.name }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Loging from '../components/Loging.vue'
import { ref, onMounted } from 'vue'

let loging = ref(true)

// 点击选择到的装备
let typeEle = ref(null)

// 三栏中需要关联的装备
let minList = ref([])
let betweenList = ref([])
let maxList = ref([])

// 小中装备之间
// 的竖线开始高度
let betweenTop = ref(49)
// 的竖线长度
let betweenLength = ref(0)

// 大中装备之间
// 的竖线开始高度
let maxTop = ref(49)
let maxLength = ref(0)

// 
const typeList = [8, 9, 10, 11, 12]

// 思路：大件后跟中件数组
// 中件后跟小件数组
// 小件后无数组
// 通过type,大件拿中件数组找中件type
// 中件拿小件数组找小件type
// 小件通过遍历中件的小件数组找被关联的中件
// 以此类推
const list = ref([
  [
    {
      name: '铁剑',
      type: 1,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_1.jpg'
    },
    {
      name: '匕首',
      type: 2,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_2.jpg'
    },
    {
      name: '搏击拳套',
      type: 3,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_3.jpg'
    },
    {
      name: '吸血之镰',
      type: 4,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_4.jpg'
    },
    {
      name: '迅捷长矛',
      type: 5,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_5.jpg'
    },
    {
      name: '雷鸣刃',
      type: 6,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_1_6.jpg'
    },
    {
      name: '冲能拳套',
      type: 7,
      url: "https://lengyibai.github.io/wzry-material/equips/physical_1_7.jpg"
    },
  ],
  [
    {
      name: '风暴巨剑',
      type: 1,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_1.jpg',
      children: [
        1
      ]
    },
    {
      name: '日冕',
      type: 2,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_2.jpg',
      children: [
        5
      ]
    },
    {
      name: '狂暴双刃',
      type: 3,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_3.jpg',
      children: [
        2, 3
      ]
    },
    {
      name: '陨星',
      type: 4,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_4.jpg',
      children: [
        1, 5
      ]
    },
    {
      name: '速击之枪',
      type: 5,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_5.jpg',
      children: [
        2
      ]
    },
    {
      name: '血魂刃',
      type: 6,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_6.jpg',
      children: [
        1, 4
      ]
    },
    {
      name: '穿云弓',
      type: 7,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_7.jpg',
      children: [
        2, 6
      ]
    },
    {
      name: '名刀.司命',
      type: 8,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_8.jpg',
      children: [
        5
      ]
    },
    {
      name: '碎星锤',
      type: 9,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_9.jpg',
      children: [
        1, 5
      ]
    },
    {
      name: '破魔刀',
      type: 10,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_10.jpg',
      children: [
        1
      ]
    },
    {
      name: '寒霜侵袭',
      type: 11,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_11.jpg',
      children: [
        2
      ]
    },
    {
      name: '制裁之刃',
      type: 12,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_12.jpg',
      children: [
        1, 4, 6
      ]
    },
    {
      name: '纯净苍穹',
      type: 13,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_2_13.jpg',
      children: [
        1, 5
      ]
    },
  ],
  [
    {
      name: '末世',
      type: 1,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_1.jpg',
      children: [
        5
      ]
    },
    {
      name: '泣血之刃',
      type: 2,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_2.jpg',
      children: [
        6
      ]
    },
    {
      name: '无尽战刃',
      type: 3,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_3.jpg',
      children: [
        1
      ]
    },
    {
      name: '宗师之力',
      type: 4,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_4.jpg',
      children: [

      ]
    },
    {
      name: '闪电匕首',
      type: 5,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_5.jpg',
      children: [
        5
      ]
    },
    {
      name: '影刃',
      type: 6,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_6.jpg',
      children: [
        3, 5
      ]
    },
    {
      name: '暗影战斧',
      type: 7,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_7.jpg',
      children: [
        2, 4
      ]
    },
    {
      name: '破军',
      type: 8,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_8.jpg',
      children: [
        1
      ]
    },
    {
      name: '逐日之弓',
      type: 9,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_9.jpg',
      children: [
        5
      ]
    },
    {
      name: '破晓',
      type: 10,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_10.jpg',
      children: [
        5, 7
      ]
    },
    {
      name: '日渊',
      type: 11,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_11.jpg',
      children: [

      ]
    },
    {
      name: '天穹',
      type: 12,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_12.jpg',
      children: [
        13
      ]
    },
    {
      name: '筑梦.逐风',
      type: 13,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_13.jpg',
      children: [
        1
      ]
    },
    {
      name: '筑梦.破空',
      type: 14,
      url: 'https://lengyibai.github.io/wzry-material/equips/physical_3_14.jpg',
      children: [
        1
      ]
    },
  ]
])

// 装备点击事件
const handleType = (val, index) => {
  // 初始化数组
  minList.value = []
  betweenList.value = []
  maxList.value = []

  // 让装备按钮高亮
  if (typeEle.value == val) {
    typeEle.value = null
    betweenTop.value = 49
    maxTop.value = 49
    betweenLength.value = 0
    maxLength.value = 0
  } else {
    typeEle.value = val
    searchMap(val, index)

    // 过滤中间成品大装备
    let between = betweenList.value.filter(item => {
      return (item < 8 || item > 12)
    })
    let minBetween = [...minList.value, ...betweenList.value]
    let maxBetween = [...maxList.value, ...between]
    minBetween = checkAgain(minBetween)
    maxBetween = checkAgain(maxBetween)

    // 计算竖线高度
    betweenLength.value =minBetween.length!=0? 80 * (minBetween[minBetween.length - 1] - minBetween[0]) : 0
    maxLength.value = 80 * (maxBetween[maxBetween.length - 1] - maxBetween[0])
    // 计算竖线开始高度
    betweenTop.value = 49 + 80 * (minBetween[0] - 1)
    maxTop.value = 49 + 80 * (maxBetween[0] - 1)
  }
}

// 装备关联函数
const searchMap = (val, index) => {
  let list
  switch (index) {
    case 0: list = minSearch(val); break;
    case 1: list = betweenSearch(val); break;
    case 2: list = maxSearch(val); break;
  }
}

// 最小装备查找
const minSearch = (val) => {
  minList.value.push(typeEle.value.type)
  list.value[1].forEach(item => {
    if (item.children.indexOf(val.type) != -1) {
      betweenList.value.push(item.type)
    }
  })
  list.value[2].forEach(item => {
    betweenList.value.forEach(ele => {
      if (item.children.indexOf(ele) != -1) {
        maxList.value.push(item.type)
      }
    })
  })
}
// 中间装备查找
const betweenSearch = (val) => {
  betweenList.value.push(typeEle.value.type)
  minList.value = val.children
  list.value[2].forEach(item => {
    if (item.children.indexOf(val.type) != -1) {
      maxList.value.push(item.type)
    }
  })
}
// 最大装备查找
const maxSearch = (val) => {
  maxList.value.push(typeEle.value.type)
  betweenList.value = val.children
  list.value[1].forEach(item => {
    betweenList.value.forEach(ele => {
      if (ele == item.type) {
        item.children.forEach(e => {
          minList.value.push(e)
        })
      }
    })
  })
}

// 查重并排序函数
const checkAgain = (list) => {
  let indexList = []
  list.forEach(item => {
    if (indexList.indexOf(item) == -1) {
      indexList.push(item)
    }
  })
  indexList.sort((a, b) => {
    return a - b
  })
  return indexList
}

// 动画样式切换
const lineLeft = (index, type) => {
  if (
    (index == 1 && betweenList.value.includes(type)) ||
    (index == 2 && maxList.value.includes(type) &&
      betweenList.value.length != 0)
  ) {
    return true
  } else {
    return false
  }
}

const lineRight = (index, type) => {
  if (
    (index == 0 && minList.value.includes(type) && betweenList.value.length != 0) ||
    (index == 1 && betweenList.value.includes(type) && maxList.value.length != 0 &&
      typeList.indexOf(type) == -1)
  ) {
    return true
  } else {
    return false
  }
}

onMounted(() => {
  setTimeout(() => {
    loging.value = false
  }, 1000)
})
</script>

<style lang="scss" scoped>
.about {
  margin: auto;
  margin-top: 20px;
  width: 94vw;
  padding: 20px;
  border-radius: 8px;
  background-color: #0d4f7a;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  .maxType {
    width: 400px;
    display: flex;
    flex-direction: column;

    .minType {
      width: 200px;
      height: 60px;
      margin-top: 20px;
      display: flex;
      align-items: center;

      .ptsChunk {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .pts {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          background-color: #fbfbfb;
        }

        .ptsBorder{
          width: 50px;
          height: 50px;
          border-radius: 25px;
          position: absolute;
          border: 3px solid #303c6b;
        }

        .ptsStyle {
          height: 50px;
          width: 50px;
          position: absolute;
          border-radius: 50px;
          border: 5px solid #d4e864;
          box-shadow: 0px 0px 20px 5px #c8e094;
        }

        .triangleBot {
          border-top: 0px solid #0d4e7a00;
          border-right: 0px solid #0d4e7a00;
          border-left: 12px solid #0d4e7a00;
          border-bottom: 12px solid #d4e864;
          transform: translate(0px, 25px) rotate(225deg);
          position: absolute;
        }

        .triangleTop {
          border-top: 12px solid #d4e864;
          border-right: 12px solid #0d4e7a00;
          border-left: 0px solid #0d4e7a00;
          border-bottom: 0px solid #0d4e7a00;
          transform: translate(0px, -26px) rotate(225deg);
          position: absolute;
        }
      }
      .ptsSize {
        height: 50px;
        font-size: 20px;
        margin-left: 5px;
        color: #fff;
      }

      .leftStart {
        height: 3px;
        width: 30px;
        animation-name: startLeftLandscape;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-direction: alternate;
        background-color: #57b4da;
        transform: translateX(-31px);
        position: absolute;
      }

      .leftEnd {
        height: 3px;
        width: 0px;
        animation-name: endLeftLandscape;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-direction: alternate;
        background-color: #57b4da;
        transform: translateX(0px);
        position: absolute;
      }

      .rightStart {
        height: 3px;
        width: 320px;
        animation-name: startRightLandscape;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-direction: alternate;
        transform: translateX(50px);
        background-color: #57b4da;
        position: absolute;
      }

      .rightEnd {
        height: 3px;
        width: 0px;
        animation-name: endRightLandscape;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-direction: alternate;
        transform: translateX(50px);
        background-color: #57b4da;
        position: absolute;
      }

      @keyframes startLeftLandscape {
        0% {
          width: 0;
          transform: translateX(0px);
        }

        100% {
          width: 30px;
          transform: translateX(-31px);
        }
      }

      @keyframes endLeftLandscape {
        0% {
          width: 30px;
          transform: translateX(-31px);
        }

        100% {
          width: 0;
          transform: translateX(0px);
        }
      }

      @keyframes startRightLandscape {
        0% {
          width: 0;
        }

        100% {
          width: 320px;
        }
      }

      @keyframes endRightLandscape {
        0% {
          width: 320px;
        }

        100% {
          width: 0;
        }
      }
    }

    .triangle {
      width: 3px;
      position: absolute;
      background-color: #57b4da;
      transition: all 1s linear;
    }
    .triangleShadow{
      box-shadow: 0px 0px 10px 1px #5ac0ef;
    }
    .triangleDisplay{
      opacity: 0;
    }
  }

  .rightType {
    width: 150px;
  }
}
</style>